html {
    scroll-behavior: smooth;
}
  
[v-cloak] {
    display: none;
}

.off-black-text{
    color: hsl(240, 9%, 4%);
}

.transparent-white{
  background-color: #ffffffbc;
}

ion-icon {
  color: white;
}

.off-black{
  background-color: #0a0a0c;
}

.futura-font {
  font-family: 'Futura';
}

.raleway-font {
  font-family: 'Raleway', sans-serif;
}

.inter-font {
  font-family: 'Inter', sans-serif;
}

.opensans-font {
  font-family: 'Open Sans', sans-serif;
}

.shake{
  animation: shake 5.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.shake2{
  animation: shake2 5.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -1px) rotate(-1deg); }
  20% { transform: translate(1px, 1px) rotate(1deg); }
  30% { transform: translate(-1px, -1px) rotate(0deg); }
  40% { transform: translate(1px, 1px) rotate(1deg); }
  50% { transform: translate(-1px, -1px) rotate(-1deg); }
  60% { transform: translate(1px, 1px) rotate(0deg); }
  70% { transform: translate(-1px, -1px) rotate(-1deg); }
  80% { transform: translate(1px, 1px) rotate(1deg); }
  90% { transform: translate(-1px, -1px) rotate(0deg); }
  100% { transform: translate(1px, 1px) rotate(0deg); }
}

@keyframes shake2 {
  0% { transform: translate(-1px, -1px) rotate(-1deg); }
  10% { transform: translate(1px, 1px) rotate(1deg); }
  20% { transform: translate(-1px, -1px) rotate(0deg); }
  30% { transform: translate(1px, 1px) rotate(1deg); }
  40% { transform: translate(-1px, -1px) rotate(-1deg); }
  50% { transform: translate(1px, 1px) rotate(0deg); }
  60% { transform: translate(-1px, -1px) rotate(-1deg); }
  70% { transform: translate(1px, 1px) rotate(1deg); }
  80% { transform: translate(-1px, -1px) rotate(0deg); }
  90% { transform: translate(1px, 1px) rotate(-1deg); }
  100% { transform: translate(-1px, -1x) rotate(-1deg); }
}

@font-face {
  font-family: 'Futura';
  src: url(./../static/fonts/Futura/Futura-Bold/futura-bold.ttf);
  font-weight: 900;
}

@font-face {
  font-family: 'Futura';
  src: url(./../static/fonts/Futura/Futura-Light/futura-light.ttf);
  font-weight: light;
}

@font-face {
  font-family: 'Avenir Next';
  src: url(./../static/fonts/AvenirNext/AvenirNext-Bold/AvenirNext-Bold-01.ttf);
  font-weight: regular;
}

*{
    margin:0px;
    padding:0px;
  }
  
  .apply-button {
    background-color: #1c71d1;
  }

  .apply-button:hover {
    color: rgb(223, 223, 223);
    border-color: rgb(223, 223, 223);
  }

  .mentor-button:hover {
    color: rgb(223, 223, 223);
    border-color: rgb(223, 223, 223);
  }

  .nav-button:hover {
    color: white;
  }

  
  .ptext{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .showcase h1{
    font-size:60px;
    color: #fff;
    font-family: "Source Code Pro", monospace;
    font-weight: bold;
    margin-bottom: 0px;
  }

  .showcase h2{
    font-size: 60px;
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid white;
    width: 12ch;
    color:white;
    font-family: "Source Code Pro", monospace;
    animation: typist 8s steps(12), blink step-end 1s infinite;
  }

  @keyframes typist{
    0%{width: 0ch;}
    47%{width: 12ch;}
    70%{width: 12ch;}
    75%{width: 12ch;}
    100%{ width: 12ch;}
  }
  @keyframes blink{
    from, to{border-color: transparent;}
    50%{border-color: white;}
  }

  @media (max-width: 780px) {
    .showcase h2{
      font-size: 40px;
      text-transform: capitalize;
      overflow: hidden;
      white-space: nowrap;
      border-right: 2px solid white;
      width: 12ch;
      color:white;
      font-family: "Source Code Pro", monospace;
      animation: typist 8s steps(12), blink step-end 1s infinite;
    }
  }


.meteor {
  border: 2px solid transparent;
  border-bottom: 60px solid #fff;
  position: absolute;
  transform-origin: top center;
  z-index: 0;
  opacity: 0;
}

.meteor:after {
  content: '';
  position: absolute;
  top: 58px;
  left: 50%;
  height: 4px;
  width: 4px;
  border-radius: 100%;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 15px 0 #fff;
}

.meteor:nth-child(1) {
  left: 85vw;
  animation: shower 6s infinite;
  top: 40vh;
  animation-delay: 3s;
}

.meteor:nth-child(2) {
  left: 20vw;
  top: 13vh;
  animation: shower 5s infinite;
  animation-delay: 7s;
}

.meteor:nth-child(3) {
  left: 69vw;
  top: 17vh;
  animation: shower 4s infinite;
  animation-delay: 9s;
}

.meteor:nth-child(4) {
  left: 34vw;
  top: 10vh;
  animation: shower2 13s infinite;
  animation-delay: 10s;
}

.meteor:nth-child(5) {
  left: 10vw;
  top: 43vh;
  animation: shower2 10s infinite;
  animation-delay: 13s;
}

.meteor:nth-child(6) {
  left: 98vw;
  top: 29vh;
  animation: shower2 10s infinite;
  animation-delay: 15s;
}

@keyframes shower {
  0% {
    transform: rotate(30deg) scaleY(0);
    opacity: 0;
  }
  6.5% {
    transform: rotate(30deg) scaleY(1);
    opacity: 1;
  }
  10.0% {
    transform: rotate(30deg) scaleY(1) translateY(500%);
    opacity: 0;
  }

  100% {
    transform: rotate(30deg) scaleY(1) translateY(500%);
    opacity: 0; 
  }
}

@keyframes shower2 {
  0% {
    transform: rotate(30deg) scaleY(0);
    opacity: 0;
  }
  3.25% {
    transform: rotate(30deg) scaleY(1);
    opacity: 1;
  }
  5.0% {
    transform: rotate(30deg) scaleY(1) translateY(500%);
    opacity: 0;
  }

  100% {
    transform: rotate(30deg) scaleY(1) translateY(500%);
    opacity: 0; 
  }
}